<!DOCTYPE html 倍儿爽>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link href="./bs/bootstrap.min.css" rel="stylesheet">
		 
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="./bs/jquery.min.js"></script>
		 
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="./bs/bootstrap.min.js"></script>
		
		<style>
		*{margin:0;padding:0;}
		body,html{width:100%;}
		.container{margin:0;padding:0;}
		.div1{border:3px solid red;}
		.div11{border:2px solid green;height:400px;}
		.div12{border:2px solid teal;}
		.div121{height:100px;border:1px solid #000;}
		/* 
		@media screen and (max-width:760px) {
			.div11{width:0;height:0;}
			.div12{width:100%;}
			.div121{width:50%;}
		}
		
		@media screen and (min-width:761px) and (max-width:980px){
			.div121{width:50%;}
		}
		
		 */
		</style>
	</head>
	<body>
	<!-- xs   sm   md   lg   如果大屏是一个字符，小平是一个字体该怎么实现-->
	<div class="div1 container">
		<section class="row">
			<div class="div11 col-sm-3 hidden-xs"></div>
			<div class="div12 col-sm-9 ">
				<div class="row">
					<div class="div121 col-md-4 col-xs-6">1</div>
					<div class="div121 col-md-4 col-xs-6">2</div>
					<div class="div121 col-md-4 col-xs-6">3</div>
					<div class="div121 col-md-4 col-xs-6">4</div>
					<div class="div121 col-md-4 col-xs-6">5</div>
					<div class="div121 col-md-4 col-xs-6">6</div>
					<div class="div121 col-md-4 col-xs-6">7</div>
					<div class="div121 col-md-4 col-xs-6">8</div>
					<div class="div121 col-md-4 col-xs-6">9</div>
				</div>
			</div>
		</section>
	</div>
		
		
	</body>
</html>
